/*
   elementPlus 的 导入

   第一步 安装    也可以直接 cdn 导入
   npm install element-plus --save

   第二步  使用

   1 完整引入
     main.js 中

     import ElementPlus from 'element-plus'
     import 'element-plus/dist/index.css'

     createApp(App).use(ElementPlus)
     任意位置 想使用  直接使用即可

   2 手动 按需导入

     npm i unplugin-element-plus -D

     vite.config.ts  中 配置

     import { defineConfig } from 'vite'
     import ElementPlus from 'unplugin-element-plus/vite'

     export default defineConfig({
     // ...
     plugins: [ElementPlus()],

     })

     任意位置 想使用  导入 注册  使用
     import {ElButton} from "element-plus"
      {
      components: { ElButton },
      }
     <el-button></el-button>

   3 自动 按需导入    !!!!!!!!!!!!!!!!!!!!!!!!!
     用命令的组件还是需要你手动导入一下的  样式

   npm install -D unplugin-vue-components unplugin-auto-import

   vue.config.js  中
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  	configureWebpack: {
		plugins: [
			AutoImport({
				resolvers: [ElementPlusResolver()],
			}),
			Components({
				resolvers: [ElementPlusResolver()],
			}),
		],
	},

}

任意位置 想使用  直接使用即可
<el-button></el-button>


=========================
全局配置
size 用于设置表单组件的默认尺寸，
zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000

app.use(ElementPlus, { size: 'small', zIndex: 3000 })

=========================

Icon 图标

1、全局引入

 npm install @element-plus/icons-vue

main.js 引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

使用：
<el-icon><add-location /></el-icon>

2 按需引入

 npm install @element-plus/icons-vue

在所使用的组件中引入，以Edit为例

import { Edit } from '@element-plus/icons-vue';

components:{ Edit }

使用： 注意，components中的注册的组件名称与html中的一致，否则有可能不生效。
<el-icon><Edit /></el-icon>

3 自动导入  !!!!!!!!!

  iconify  收录  element-plus的图标库叫 ep  其他的 在 数组中依次加入即可
  iconify 自动安装 已经实现 --autoInstall: true,
  iconify 自动导入   enabledCollections: ['ep', 'ic', 'material-symbols']

   使用时  i-ep-XXX

   input加icon。要使用插槽的方式才会生效
   <el-input placeholder="搜索文本框">
    <template #suffix>
        <i-ep-search></i-ep-search>
    </template>
   </el-input>

npm i @element-plus/icons-vue

npm i -D unplugin-icons      自动导入组件已将安装--unplugin-vue-components

配置  vue.config.js

  // icon
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')

	configureWebpack: {
		plugins: [
			AutoImport({
				resolvers: [
					// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
					ElementPlusResolver(),
					// 自动导入图标组件
					IconsResolver({
						prefix: 'i',
					}),
				],
			}),
			Components({
				resolvers: [
					// 自动导入 Element Plus 组件
					ElementPlusResolver(),
					// 自动注册图标组件
					IconsResolver({
						// 使用element-plus的图标库 被收录在iconify中  叫 ep
						// 其他图标库请到 https://icon-sets.iconify.design/
						enabledCollections: ['ep'],
					}),
				],
			}),
			Icons({
				// compiler: 'vue3',
				autoInstall: true,
			}),
		],
	},

  <el-icon><i-ep-edit /></el-icon>

=========================

menu 中  动态 加载 icon
因为是 自动导入  自己使用  需要  i-ep-user
动态 加载 规则  目前 自己摸索的 以后 改进

自己总结
动态加载数据  -- :separator-icon="ArrowRight"
数据就是 导入的 组件  可以 setup  仅仅导入即可
动态加载变量  -- <component :is="item.icon"   item.icon === ArrowRight
无 setup 糖 中 导入 注册组件


2 import { User } from '@element-plus/icons-vue'
 导出  需要 大写  使用  小写 或者 驼峰
3 <i-ep-user />  依旧好使
4 需要 被 el-icon 包裹   否则 没有大小

  		<el-icon :size="32">
				<user />
			</el-icon>

 但是我们需要动态创建

5 直接 使用 也可以  也需要指定大小

      <el-icon :size="32">
				<component :is="item.icon"></component>
			</el-icon>

	<component
				:is="item.icon"
				style="width: 1em; height: 1em; margin-right: 8px"
			></component>


=======================

Loading、Message 等这种以服务的方式来调用 自动导入样式

 npm i unplugin-element-plus -D

配置  vue.config.js

require('unplugin-element-plus/webpack')({
				// options
			}),

import { ElMessage } from 'element-plus'
ElMessage.error('服务器内部错误')

===========================================

国际化
 1 全局安装    不用

 2 Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

 App.vue  中

 <template>

	<el-config-provider :locale="locale">
		<!-- 一级路由 -->
		<router-view />
	</el-config-provider>

</template>

<script setup>

// 配置中文
import locale from 'element-plus/lib/locale/lang/zh-cn'

</script>

==================================

 自动导入 中 修改主题色

 1 npm install -D unplugin-vue-components unplugin-auto-import
 此步骤 之前 自动导入 已经安装过

 2 @/assets/styles/el-variables.scss 中

 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
		$colors: (
			'primary': (
				'base': #409eff,
			),
		),
	);

	3 vue.config.js  中

	const ElementPlus = require('unplugin-element-plus/webpack')

	css: {
		loaderOptions: {
			scss: {
				//自定义的主题文件
				additionalData: `@use "@/assets/styles/el-variables.scss" as *;`,
			},
		},
	},

AutoImport + Components--resolvers--
	ElementPlusResolver({ importStyle: 'sass' }),

ElementPlus({
				useSource: true,
			}),

*/
